<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>

<body>
    <div>
        <button onclick="openSocket()">开启socket</button>
        <button onclick="send()">发送</button>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var socket;

    function openSocket() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var socketUrl = "http://127.0.0.1:18080/ws/socket/websocket/zhy";
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            console.log(socketUrl);
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                console.log(msg.data);
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

    function send() {
        const messageModel = {
            fromId: 'zhy',
            toId: 'maochd',
            message: 'from zhy to maochd'
        }
        socket.send(JSON.stringify(messageModel));
    }
</script>

</html>